<template>
	<view class="serve_width" style="padding-bottom: 200rpx;">
		<!-- 导航 -->
		<u-navbar back-text="商家售后" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<!-- <u-navbar back-icon-color="#000000" title="商家售后" title-color="#3F3F3F" :title-bold="true" :border-bottom="false"
		 :background="background"></u-navbar> -->
		<!-- end -->
		<view v-for="(item,index) in details" :key='index'>
			<view class="serve_width serve_border">
				<view class="serve_width2" style="overflow: hidden;padding:20rpx 0rpx 10rpx 0rpx ;">
					<view class="serve_title" style="float: left;">{{FormData(item.handled)}}</view>
					<view v-if="item.handled==1||item.handled==2||item.handled==9" class="serve_time" style="float: right;">
						剩余时间
						<!-- {{item.countDown}} -->
						<u-count-down :timestamp="item.countDown" font-size="26"></u-count-down>
					</view>
				</view>
			</view>
			<view class="serve_width" style="border-bottom:12rpx solid #E8E8E8 ;">
				<view class="serve_width2 serve_text" v-if="item.handled==1">
					商家已收到您的售后申请，等待商家回复，商家24小时内不回复订单将自动取消，您支付的金额将会自动退回
				</view>
				<view class="serve_width2 serve_text" v-if="item.handled==2">
					商家拒绝了您的售后申请，您可以申请平台介入，由平台调解该笔订单，并决定本次售后最终处理结果，48小时内不做操作默认为撤销投诉
				</view>
				<view class="serve_width2 serve_text" v-if="item.handled==3">
					商家通过了您的售后要求，将会在2021年1月14日 15点安排家政人员上门重新提供服务。
				</view>
				<view class="serve_width2 serve_text" v-if="item.handled==4">
					商家通过了您的售后申请，订单金额将在3个工作日内退回您的支付账户，退款金额 ￥{{item.refundMoney}}
				</view>
				<view class="serve_width2 serve_text" v-if="item.handled==5">
					请保持电话畅通，平台将会根据双方提供的材料及电话沟通的内容决定本次售后申请最后的处理结果
				</view>
				<view class="serve_width2 serve_text" v-if="item.handled==6">
					根据双方情况及提供的材料，平台决定通过用户的售后申请，退款金额将会在3个工作日内退回。
				</view>
				<view class="serve_width2 serve_text" v-if="item.handled==7">
					根据双方情况及提供的材料，平台决定通过用户的售后申请，退款金额将会在3个工作日内退回。
				</view>
				<view class="serve_width2 serve_text" v-if="item.handled==8">
					平台拒绝了用户的售后申请，订单已完成。
				</view>
				<view class="serve_width2 serve_text" v-if="item.handled==9">
					商家操作了售后服务已完成，请及时确认
				</view>
				<view class="serve_width2 serve_text" v-if="item.handled==10">
					用户售后完成
				</view>
				<view class="serve_width2 serve_text" v-if="item.handled==11">
					商家超时未响应售后申请，订单金额将在3个工作日内退回您的支付账户，退款金额 ￥{{item.refundMoney}}
				</view>
				<view class="serve_width2 serve_text" v-if="item.handled==12">
					用户撤销申请
				</view>
				<view class="serve_width2 serve_text" v-if="item.handled==13">
					平台拒绝理赔
				</view>
				<view class="serve_width2 serve_text" v-if="item.handled==14">
					平台同意理赔
				</view>
				<view class="serve_width2 serve_text" v-if="item.handled==15">
					商家超时未回复,您支付的金额将会自动退回
				</view>
			</view>
			<!-- 买家申请原因 -->
			<view v-for="(items,dex) in item.issueRecords" :key='dex' style="border-bottom:12rpx solid #E8E8E8 ;">
				
			<view class="serve_width serve_border ">
				<view class="serve_width2" style="overflow: hidden;padding:20rpx 0rpx 10rpx 0rpx ;">
					<view class="serve_title" style="float: left;">
						
						<view style="display: inline-block;" v-if="items.recordType==1">用户申请
						<text v-if="item.handlingWay==1">退款</text>
						<text v-else-if="item.handlingWay==2">重新服务</text>
						<text v-else-if="item.handlingWay==3">理赔</text>
						</view>
					
						<text v-if="items.recordType==2">商家同意</text>
						<text v-if="items.recordType==3">商家拒绝</text>
						<text v-if="items.recordType==4">用户申请平台介入</text>
						<text v-if="items.recordType==5">平台通过</text>
						<text v-if="items.recordType==6">平台拒绝</text>
						<text v-if="items.recordType==7">商家超时未响应</text>
						
						<text v-if="items.recordType==1 && (item.handled==1 || item.handled==2 || item.handled==5)" @click="chexiao(item.orderIssueId)" class="text_css">撤销申请</text>
					</view>
					<view class="serve_time" style="float: right;">{{items.createTime}}</view>
				</view>
			</view>
			<view class="serve_width2" style="padding: 15rpx 0rpx;">
				<view class="serve_text" v-if="items.reason" style="padding: 5rpx 0rpx;">原因：{{items.reason||'未填写'}}</view>
				<view class="serve_text" v-if="items.comments"  style="padding: 5rpx 0rpx;">描述：{{items.comments||'未填写'}}</view>
				<view v-if="items.imageList" class="img_box" style="display: flex;margin-top: 20rpx;flex-wrap: wrap;">
					<view v-for="(ite, inde) in items.imageList" :key="inde" @click="clickPreview(items.imageList,inde)">
						<image :src="ite" mode="" style="width: 196rpx;height: 196rpx;margin-right: 38rpx;"></image>
					</view>
				</view>
			</view>
			</view>
			
		
		
		
			<view class="serve_width" style="padding-top: 10rpx;"></view>
			<view class="serve_button" @click="intervene(item.orderIssueId)" v-if="item.handled==12||item.handled==2">申请平台介入</view>
			<view class="serve_button" @click="finish(item.orderIssueId)" v-if="item.handled==9||item.handled==3">售后已完成</view>
		</view>
		<!-- <view class="serve_width serve_border ">
			<view class="serve_width2" style="overflow: hidden;padding:20rpx 0rpx 10rpx 0rpx ;">
				<view class="serve_title" style="float: left;">买家申请重新服务</view>
				<view class="serve_time" style="float: right;">2021-1-12 12:00</view>
			</view>
		</view>
		<view class="serve_width2" style="padding: 15rpx 0rpx;">
			<view class="serve_text" style="padding: 5rpx 0rpx;">售后原因：没有打扫干净</view>

			<view class="img_box" style="">
				<view v-for="(item, index) in imgs" :key="index" style="width: 30%;height: 200rpx;background-color:#DFDFDF ;margin-top: 20rpx;"></view>
			</view>
		</view> -->
		<!-- <view class="serve_width" style="border-bottom:12rpx solid #E8E8E8 ;padding-top: 10rpx;"></view> -->

		<!-- <view class="serve_width serve_border ">
			<view class="serve_width2" style="overflow: hidden;padding:20rpx 0rpx 10rpx 0rpx ;">
				<view class="serve_title" style="float: left;">买家申请重新服务</view>
				<view class="serve_time" style="float: right;">2021-1-12 12:00</view>
			</view>
		</view>
		<view class="serve_width2" style="padding: 15rpx 0rpx;">
			<view class="serve_text" style="padding: 5rpx 0rpx;">售后原因：没有打扫干净</view>
			<view class="serve_text" style="padding: 5rpx 0rpx;">用户描述：没有打扫干净</view>
			<view class="img_box" style="">
				<view v-for="(item, index) in imgs" :key="index" style="width: 30%;height: 200rpx;background-color:#DFDFDF ;margin-top: 20rpx;"></view>
			</view>
		</view> -->
		<!-- <view class="serve_width" style="border-bottom:12rpx solid #E8E8E8 ;padding-top: 10rpx;"></view> -->
	<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fca800'
				},
				timestamp: 86400,
				details:''
			};
		},
		onLoad(option) {
			this.orderId = option.orderId
			this.getDetail();
		},
		methods: {
			// 点击放大
			clickPreview(imageList,inde) {
				uni.previewImage({
					current: inde,
					urls: imageList,
					indicator: 'default',
					loop: true
				});
			},
			//撤销申请
		chexiao(orderIssueId){
			var _this = this
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'order-issue/cancel'
			};
			let data = {
				issueId: orderIssueId,
			};
			_this.http.httpTokenRequest(opts, data).then(res => {
				if(res.code=200){
					_this.$refs.uToast.show({
						title: res.message,
						type: 'success'
					})
					setTimeout(function(){
						uni.switchTab({
							url:'../../pages/order/index'
						})
					},500)
				}else{
					_this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					})
				}
			})
		},
			FormData(data){
				switch(data){
					case 1:
						return '申请中';
					case 2:
						return '商家拒绝';
					case 3:
						return '重新服务中';
					case 4:
						return '商家同意退款';
					case 5:
						return '平台仲裁中';
					case 6:
						return '平台介入通过';
					case 7:
							return '平台介入通过';
					case 8:
						return '平台介入拒绝';
					case 9:
						return '商家售后完成';
					case 10:
						return '用户售后完成';
					case 11:
						return '商家超时未回复';
					case 12:
						return '申请撤销';
					case 13:
						return '平台拒绝理赔';
					case 14:
						return '平台同意理赔';
					case 15:
						return '商家超时未回复后退款';
					default:
						return;
				}
			},
			getDetail() {
				var _this = this
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'order-issue/info'
				};
				let data = {
					orderId: _this.orderId,
				};
				_this.http.httpTokenRequest(opts, data).then(res => {
					if (res.code = 200) {
						console.log(res.data, "售后详情")
						_this.details = res.data
					} else {
						_this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				})
			},
			editMarket() {
				uni.navigateBack({
					delta: 1
				});
			},
			finish(orderIssueId){
				var _this = this
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'order-issue/finish'
				};
				let data = {
					issueId: orderIssueId,
				};
				_this.http.httpTokenRequest(opts, data).then(res => {
					if (res.code = 200) {
					uni.navigateBack({
						delta: 1
					});
					} else {
						_this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				})
				
			},
			intervene(orderIssueId) {
				uni.navigateTo({
					url: 'intervene?orderIssueId='+orderIssueId
				})
			}

		}
	};
</script>

<style>
	.serve_width {
		width: 100%;
		margin: auto;
	}

	.serve_width2 {
		width: 93%;
		margin: auto;
	}

	.serve_button {
		z-index: 10;
		text-align: center;
		border-radius: 36rpx;
		font-size: 32rpx;
		color: white;
		font-weight: bold;
		line-height: 72rpx;
		width: 82%;
		bottom: 40rpx;
		height: 72rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		background-color: #fca800;
	}

	.serve_border {
		
		border-bottom: 2rpx solid #dcdcdc;
	}
	.border_css{
		width: 100%;
		height: 2rpx ;
		background-color:#dcdcdc ;
	}

	.serve_title {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 42rpx;
		color: #666666;
	}

	.text_css {
		margin-left: 20rpx;
		width: 140rpx;
		height: 42rpx;
		background: #fca800;
		padding: 5rpx 12rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 42rpx;
		color: #ffffff;
		border-radius: 20rpx;
	}

	.serve_time {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 42rpx;
		color: #3f3f3f;
	}

	.serve_text {
		text-align: justify;
		padding: 20rpx 0rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 36rpx;
		color: #979797;
	}

	.img_box {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
</style>
